<template>
	<view class="content">
		<!-- #ifndef H5 -->
		<u-navbar :is-back="false" :border-bottom="false" :background="{background: '#1db0fc' }"></u-navbar>
		<!-- #endif -->
		<scroll-view class="advertising-list" :scroll-x="false" :scroll-y="true" @scrolltolower="dataLoading">
			<view v-for="(val,key) in data" v-if="data[key].delete_time == 0">
				<view class="advertising-info advertising-style-tow">
					<text class="advertising-content line2" v-html="val.content"></text>
					<u-row class="advertising-images-group">
						<u-col span="4" class="advertising-images-group-item" v-for="(v,k) in val.cover_images" v-if=" k <= 2">
							<img :src="v.url" style="width: 160rpx;height: 160rpx;">
						</u-col>
					</u-row>
					<u-row class="advertising-images-group">
						<u-col span="4" class="advertising-images-group-item" v-for="(v,k) in val.cover_images" v-if="k >= 3 && k <= 5">
							<img :src="v.url" style="width: 160rpx;height: 160rpx;">
						</u-col>
					</u-row>
					<u-row class="advertising-images-group">
						<u-col span="4" class="advertising-images-group-item" v-for="(v,k) in val.cover_images" v-if="k >= 6 && k <= 8">
							<img :src="v.url" style="width: 160rpx;height: 160rpx;">
						</u-col>
					</u-row>
					<view class="shop-site">
						<view class="icon-display-area">
							<u-icon name="map-fill" color="#ffffff" size="28"></u-icon>
						</view>
						<text class="shop-site-info"  v-html="val.site"></text>
					</view>
					<view class="information">
						<u-row>
							<u-col span="6" text-align="center" class="item">
								<view class="title">
									曝光量
								</view>
								<text class="value" v-html="val.show_count"></text>
							</u-col>
							<u-col span="6" text-align="center" class="item border-left">
								<view class="title">
									阅读量
								</view>
								<text class="value" v-html="val.check_count"></text>
							</u-col>
							<!-- <u-col span="4" text-align="center" class="item border-left">
								<view class="title">
									转发量
								</view>
								<text class="value" v-html="val.transpond_count"></text>
							</u-col> -->
						</u-row>
					</view>
					<view class="operation-area">
						<u-row>
							<u-col span="6" text-align="left" class="item">
								<u-switch size="40" v-model="val.status" @change="articeStatusSwitching(val.status,val.id)"></u-switch>
								<text class="scope" v-html="'范围：' + val.scope"></text>
							</u-col>
							<u-col span="6" text-align="right" class="item">
								<u-button hover-class="none" size="mini" :custom-style="editButtonStyle" :plain="true" type="primary" @click="editArtice(val.id)">编辑</u-button>
								<u-button hover-class="none" size="mini" :plain="true" type="error" @click="articeDelete(val.id,key)">删除</u-button>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
			<u-empty text="暂无数据" v-if="data.length <= 0" mode="data" color="#ffffff" icon-color="#ffffff"></u-empty>
			<u-loadmore :status="dataStatus" v-if="data.length >= 1" color="#ffffff" />
		</scroll-view>
		<view class="footer">
			<u-button shape="circle" hover-class="none" :custom-style="customStyle" @click="createExtension">发布朋友圈</u-button>
		</view>
	</view>
</template>
<script>
	import {
		my,
		statusSwitching,
		dataDelete
	} from '@/api/circleOfFriends';
	export default {
		data() {
			return {
				customStyle: {
					background: 'linear-gradient(to bottom,rgba(29, 176, 252,1) 0,rgba(29, 176, 252,.8))', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#fff'
				},
				editButtonStyle: {
					borderColor: '#1db0fc !important',
					color: '#1db0fc !important',
					marginRight: '20rpx'
				},
				data: [],
				page: 1,
				limit: 10,
				dataStatus: 'loadmore'
			};
		},
		beforeMount(option) {
			var _this = this;
			my({
				page: _this.page,
				limit: _this.limit,
			}).then(res => {
				if (res.code == 1) {
					if (parseInt(parseInt(res.data.count) - parseInt(_this.page * _this.limit)) <= 0) {
						_this.dataStatus = 'nomore';
					}else{
						_this.dataStatus = 'loadmore';
					}
					for (var key in res.data) {
						_this.data.push(res.data[key]);
					}
				} else {
					_this.$refs.uToast.show({
						title: res.msg
					})
				}
			})
		},
		methods: {
			createExtension() {
				uni.navigateTo({
					url: '/pages/merchant/extension/create'
				});
			},
			articeStatusSwitching(status, id){
				var _this = this;
				statusSwitching({
					id:id,
					status:status
				}).then(res => {
					if (res.code == 1) {
						_this.$toast({
							title: '状态切换成功'
						});
					} else {
						_this.$toast({
							title: res.msg
						});
					}
				})
			},
			articeDelete(id,key){
				var _this = this;
				dataDelete({
					id:id
				}).then(res => {
					if (res.code == 1) {
						_this.$toast({
							title: '数据删除成功'
						});
						_this.data[key].delete_time = 1;
					} else {
						_this.$toast({
							title: res.msg
						});
					}
				})
			},
			editArtice(id){
				uni.navigateTo({
					url: '/pages/merchant/extension/edit?id=' + id
				});
			},
			dataLoading() {
				var _this = this;
				if (_this.dataStatus != 'nomore') {
					_this.dataStatus = 'loading';
					_this.page++;
					my({
						page: _this.page,
						limit: _this.limit,
					}).then(res => {
						if (res.code == 1) {
							console.log(res.data.count)
							if (parseInt(parseInt(res.data.count) - parseInt(_this.page * _this.limit)) <= 0) {
								_this.dataStatus = 'nomore';
							}else{
								_this.dataStatus = 'loadmore';
							}
							for (var key in res.data) {
								_this.data.push(res.data[key]);
							}
							
						} else {
							_this.$toast({
								title: res.msg
							});
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.footer {
		position: fixed;
		width: 100%;
		padding: 0 10%;
		bottom: 3vh;
		margin: 0 auto;
		z-index: 2;
	}
	.padding-bottom-10vh{
		padding-right: 10vh;
	}

	.advertising-list {
		background: #1db0fc;
		padding: 20rpx 20rpx 20rpx;
		width: auto;
		height: calc(100vh - 20px);
		// background-color: #f7f8fa;

		.advertising-info {
			border: 1px solid #ddd;
			padding: 20rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
			margin-bottom: 10px;

			.advertising-content{
				font-size: 14px;
				// font-weight: 400;
				color: #919191;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				// overflow: hidden;
				margin-bottom: 20rpx;
			}

			.shop-site {
				color: #9e9e9e;
				// padding-top: 5px;
				// border-top: 1px solid #eee;
				margin-top: 10rpx;
				display: flex;

				.icon-display-area {
					padding: 0 5rpx;
					height: 38rpx;
					line-height: 38rpx;
					border-radius: 4rpx;
					background-color: #4ca2f2;
					text-align: center;
				}

				.shop-site-info {
					padding-left: 5px;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
					line-height: 19px;
					height: 19px;
				}
			}

			.information {
				margin-top: 10px;
				border: 1px solid #eee;
				border-radius: 10rpx;

				.border-top {
					border-top: 1px solid #eee;
				}

				.border-left {
					border-left: 1px solid #eee;
				}

				.item {
					color: #626366;
					font-weight: bold;
					padding: 20rpx 0 !important;

					.title {
						margin-bottom: 10rpx;
					}

					.value {
						font-size: 32rpx;
						color: #000;
					}
				}
			}

			.operation-area {
				padding-top: 20rpx;
				text-align: right;

				.item {
					&:first-child {
						display: flex;
					}

					// .status-name{
					// 	line-height: 40rpx;
					// 	height: 40rpx;
					// 	padding-left: 20rpx;
					// }
					.scope {
						padding-left: 20rpx;
						color: $u-type-info-dark;
					}
				}
			}
		}

		.advertising-style-one {
			.advertising-image {
				width: 100%;
				border-radius: 10rpx;
				margin-bottom: 10rpx;
			}
		}

		.advertising-style-tow {
			.advertising-images-group {
				display: flex;
				flex-wrap: nowrap;
				-webkit-box-pack: justify;
				justify-content: space-between;
				position: relative;
				overflow: hidden;
				margin-bottom: 10rpx;

				.advertising-images-group-item {
					text-align: center !important;
					padding: 0 !important;
					flex: 1 1 0px;
					overflow: hidden;
					pointer-events: none;
					transform: scale(1);

					&:nth-child(n + 2) {
						margin-left: 5px;
					}

					img {
						width: 100%;
						border-radius: 10rpx;
					}

				}

			}
		}
	}
</style>
